<template>
	<el-scrollbar wrap-class="scrollbar-wrapper" :style="'height:'+ maxHeight + 'px'" >
		<el-menu background-color="#304156" text-color="#BFCBD9" active-text-color="#1890ff"
			@select="selectHandler" :default-active="routerUrl" :collapse="isCollapse" collapse-transition unique-opened
			class="el-menu-vertical-demo">
			<template v-for="item in menuList">
				<!-- 第一层 -->
				<template v-if="item.type == 'CAIDAN'">
					<el-submenu :index="item.id" :key="item.id">
						<template slot="title">
							<i :class="[item.icon]"></i>
							<span>{{ item.name }}</span>
						</template>
						<!-- 第二层 -->
						<template v-for="item in item.children">
							<template v-if="item.type == 'CAIDAN'">
								<el-submenu :index="item.id" :key="item.id" :disabled="item.status == 1">
									<template slot="title">
										<i :class="[item.icon]"></i>
										<span>{{ item.name }}</span>
									</template>
									<!-- 第三层 -->
									<template v-for="item in item.children">
										<el-menu-item :index="item.routerUrl" :key="item.id" :disabled="item.status == 1">
											<template slot="title">
												<i :class="[item.icon]"></i>
												<span>{{ item.name }}</span>
											</template>
										</el-menu-item>
									</template>
								</el-submenu>
							</template>
							<!-- 第二层else -->
							<template v-else>
								<el-menu-item :index="item.routerUrl" :key="item.id" :disabled="item.status == 1">
									<template slot="title">
										<i :class="[item.icon]"></i>
										<span>{{ item.name }}</span>
									</template>
								</el-menu-item>
							</template>
						</template>
					</el-submenu>
				</template>
				<!-- 第一层else -->
				<template v-else>
					<el-menu-item class="my-menu-item" :index="item.routerUrl" :key="item.id" :disabled="item.status == 1">
						<i :class="[item.icon]"></i>
						<template slot="title">
							<span>{{ item.name }}</span>
						</template>
					</el-menu-item>
				</template>
			</template>
		</el-menu>
	</el-scrollbar>
</template>

<script>
	export default {
		name: "Menu",
		data() {
			return {
				routerUrl: null,
				maxHeight:500
			};
		},
		mounted() {
			this.routerUrl = this.$route.path;
			this.maxHeight = document.body.clientHeight - 50
		},
		methods: {
			//选中
			selectHandler(index, indexPath) {
				console.info("selectHandler",index,indexPath)
				let item = this.getMenuByList(this.menuList,index)
				let query = item.routerParam?JSON.parse(item.routerParam):{}
				this.$router.push({
					path:index,
					query:query
				})
			},
			getMenuByList(menuList,path){
				if(!menuList){
					return null
				}
				for (var i = 0; i < menuList.length; i++) {
					let item = menuList[i]
					// console.info("循环",item.name,item.routerUrl,path)
					if(item.type == 'CAIDAN'){
						let menu = this.getMenuByList(item.children,path)
						if(menu != null){
							return menu
						}
					}else if(item.type == 'ZICAIDAN'){
						if(item.routerUrl == path){
							return item
						}
					}
				}
				return null
			}
		},
		watch: {},
		props: {
			menuList: Array,
			isCollapse: Boolean,
		},
	};
</script>
<style lang="scss" scoped>
	/deep/ .el-scrollbar__wrap{
		overflow: auto;
		overflow-x: hidden;
	}
	 .el-menu-vertical-demo:not(.el-menu--collapse) {
	    width: 200px;
	    min-height: 400px;
		border-right: unset;
	  }
</style>
